<template>
  <div class="imdetail-conn bg-fff fixed-top mt-97">
    <div class="manage-caption mx-30 bg-fff pb-30 border-bottom">
          <div class="manage-titl py-30 f28"><span class=" fl mr-30 fontbold">{{orderF.title}}</span></div>
          <div class="manage-contn bg-faf">
              <div class="mancon-img fl"><i class="f22 color-fff bg-000">{{orderF.goodsType}}</i><span class="middle"></span><img :src=defaultImg></div>
              <div class="mancon-tn py-30 mt-10" ref="html" id="orHtml">
                  <div class="tn-hxtxt f26 color-666">{{orderF.gameName}}/{{orderF.regionName}}</div>
                  <div class="tn-hxtxt f26 color-666">订单编号：{{orderF.orderId}}</div>
                  <!--<div class="tn-hxtxt f26 color-666 pr-30">&lt;!&ndash;<em class="color-000 fr">x{{orderInfo.unitNum}}</em>&ndash;&gt;商品价格：{{$route.params.orderPrice}}元&lt;!&ndash;/{{orderInfo.unitName}}&ndash;&gt;</div>-->
              </div>
          </div>
      </div>
      <div class="mancon-titl px-30 py-20 bg-fff border-bottom text-center ">
        <a class="send f30 border border-color text-center color-m1" @click="sendOrderInfo">发送订单信息</a>
      </div>
  </div>
</template>
<script>
   import {mapState} from 'vuex'
   import defaultImg from 'images/default_img.jpg'
export default {
  data() {
    return {
     /* pushContent:'<div class="tn-hxtxt f26 color-666">订单编号：MDJTGU2343535</div>',
      content:{
        type:4,
        data: {
          template:`              <div class="mancon-tn py-15  ">
                            <div class="tn-hxtxt f26 color-666">天龙八部(手游)/QQ(苹果)/QQ2服</div>
                            <div class="tn-hxtxt f26 color-666">订单编号：MDJTGU2343535</div>
                            <div class="tn-hxtxt f26 color-666 pr-30"><em class="color-000 fr">x2</em>商品价格：240元/件</div>
                        </div>`
        }
      }*/
        defaultImg:defaultImg,
      orderF:{},
      msgToSent:'',
      pushContent:'',
      content:{
        type:4,
        data: {
            template:`              <div class="mancon-tn py-15  ">
             <div class="tn-hxtxt f26 color-666">天龙八部(手游)/QQ(苹果)/QQ2服</div>
             <div class="tn-hxtxt f26 color-666">订单编号：MDJTGU2343535</div>
             <div class="tn-hxtxt f26 color-666 pr-30"><em class="color-000 fr">x2</em>商品价格：240元/件</div>
             </div>`
             }
      }
    }
  },
  props: ['scene','to'],
  computed:{
    ...mapState({
      orderInfo: state => {
        return state.buyerCenter.orderDetail.result || state.orderMange.mobileDetail || ''
      },
    })
  },
  filters:{
    type(val){
      switch (val){
        case 1:
          return '装备'
        break;
        case 2:
          return '游戏账号'
        break;
        case 3:
          return '游戏币'
        break;
      }
    }
  },
  watch:{
      orderF(val){
      if(JSON.stringify(val) !={}){
        /*this.msgToSent=`${this.orderInfo.title}\n${this.orderInfo.gameName}/${this.orderInfo.regionName}/${this.orderInfo.serverName}\n订单编号：${this.orderInfo.orderId}\n商品价格：${this.orderInfo.price}元/${this.orderInfo.unitName}    x${this.orderInfo.unitNum}`*/
          this.msgToSent=`${this.orderF.title}\n${this.orderF.gameName}/${this.orderF.regionName}\n订单编号：${this.orderF.orderId}`
      }
    }
  },
  created(){
    let [from,id]=this.$route.params.orderInfo.split('-')
    console.log(from,id)
    let order =JSON.parse(localStorage.getItem('imOrderInfo')).orderInfo.OrderInfo
    order.forEach((item)=>{
     if(item.Key=='订单号'){
       this.orderF.orderId=item.Value
     }else if(item.Key=='商品名称'){
       this.orderF.title=item.Value
     }else if(item.Key=='类型'){
       this.orderF.goodsType=item.Value
     }else if(item.Key=='游戏'){
       this.orderF.gameName=item.Value
     }else if(item.Key=='区服'){
       this.orderF.regionName=item.Value
     }else if(item.Key=='购买数量'){
       this.orderF.unitNum=item.Value
     }

    })
    if(from=='mobgoods'){
      //M站
    }else if(from=='pcgoods'){
      //pc
    }else{
      //pc手游
    }
  },
  mounted(){
      if(JSON.stringify(this.orderF) !='{}'){
        this.msgToSent=`${this.orderF.title}\n${this.orderF.gameName}/${this.orderF.regionName}\n订单编号：${this.orderF.orderId}`
        console.log(this.msgToSent)
      }
      //this.content.data.template=this.$refs.html.innerHTML
      //this.content.data.template=document.getElementById('orHtml').innerHTML
      //console.log(this.content.data.template)
  },
  methods: {
    /*sendOrderInfo() {
      this.$store.dispatch('sendMsg',{
        type: 'custom',
        scene: this.scene,
        to: this.to,
        //pushContent: this.pushContent,
        content: this.content
      })
      this.$parent.orderShow=false
    }*/
    sendOrderInfo() {
      let obj,expand;
      if(this.$isLocalStorageSupported() && localStorage.getItem('imOrderInfo')){
        obj=JSON.parse(localStorage.getItem('imOrderInfo'))
        expand={
          orderId:obj.orderInfo.OrderId,
          rcId:obj.orderInfo.CustomServiceLoginId,
          userType:obj.userType,
          clientType:'M10.1'
        }
      }
      console.log(expand)
      this.$store.dispatch('sendMsg', {
        type: 'text',
        scene: this.scene,
        to: this.to,
        custom:JSON.stringify(expand),
        text: this.msgToSent
      })
      /*this.$store.dispatch('sendMsg',{
        type: 'custom',
        scene: this.scene,
        to: this.to,
        custom:JSON.stringify(expand),
        //pushContent: this.pushContent,
        content: this.content
      })*/
      this.$parent.orderShow=false
    }
  }
}
</script>
<style  src="css/member/member-im.css"></style>
